<script setup lang="ts">
import { ref,provide,watch } from 'vue'
import LF from './lf.vue'
import MD from './md.vue'
import RT from './rt.vue'
const cell = ref(4)
const updateCell = (newCell) => {
  cell.value = newCell
}
// const updateTabList=()=>{
//   playList.value.splice(0,playList.value.length)


// }
const clearPlayList=()=>{
  playList.value.splice(0,playList.value.length)

}
// 最新展示数据
const playList=ref([])
provide('playList', playList); 
// 切换宫格的时候，清除所有视频播放
watch(cell,(newValue,oldValue)=>{
  if(newValue!=oldValue){
    playList.value.splice(0,playList.value.length)
  }
})

</script>

<template>
  <!-- 内容 S -->
  <div class="bd-box">
    <LF :cell="cell" @updateCell="updateCell"  :showPortList="playList" @clearPlayList="clearPlayList"/>
 
    <MD :cell="cell" :showPortList="playList" />
    <RT />
  </div>
  <!-- 内容 E -->
</template>

<style lang="less" scoped>
// 内容
.bd-box {
  position: absolute;
  top: 90px;
  left: 20px;
  right: 20px;
  bottom: 0;
  // border: 1px solid red;
  display: flex;
  padding: 0 15px 15px;
  height: 90%;
  overflow: hidden;
}
</style>
